<template>
    <div class="message">
        <el-button type="primary" @click="messageAdd">添加消息</el-button>
        <el-table
                :data="messages"
                style="width: 100%"
        >
            <el-table-column
                    label="标题">
                <template slot-scope="scope">
                    <span>{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="content">
                <template slot-scope="scope">
                    <span>{{ scope.row.content }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="消息类型">
                <template slot-scope="scope">
                    <span>{{ messageTypeConvert(scope.row.messageTypeId) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="所属用户">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.user.userName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="发布时间">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ new Date(scope.row.date).toLocaleString() }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
                    :filters="[{'text': '审核通过',value:0},{'text': '待审核',value:-1},{'text': '审核失败',value: 1},]"
                    :filter-method="flagFilter"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ flagConvert(scope.row.flag) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button><br />
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                center>
            <el-form :model="message" label-width="100px" class="demo-ruleForm">
                <el-form-item label="审核状态" prop="region">
                    <el-select v-model="message.flag">
                        <el-option v-for="(flag,index) in flagType" :key="index-1" :value="index-1" :label="flag">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="消息类型" prop="region">
                    <el-select v-model="message.messageTypeId">
                        <el-option v-for="(flag,index) in messagesType" :key="index[0]" :value="flag[0]" :label="flag[1]">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="formSubmit">确 定</el-button>
          </span>
        </el-dialog>

    </div>
</template>

<script>
  export default {
    name: "Message",
    data(){
      return {
        messages : [],
        message:{},
        dialogVisible : false,
        isAdd : null,
        messagesType: null, // 所有消息类型
        flagType: ["待审核","审核通过","审核失败"],
      }
    },
    created() {
      this.getMessage();
      this.getMessageType();
    },
    computed: {
    },
    methods: {
      getMessage(){
        this.$api.message.getMessages().then(res => {
          this.messages = res.data;
        })
      },
      flagFilter(value,row){
        if (row.flag === value)
          return row;
      },
      getMessageType(){
        this.$api.message.getMessageType().then(res => {
          this.messagesType = new Map();
          res.data.map(item => {
            this.messagesType.set(item.id,item.typeName);
          });
        });
      },
      flagConvert(flag){
        return this.flagType[flag+1];
      },
      messageTypeConvert(messageTypeId){
        if (this.messagesType !== null){
          return this.messagesType.get(messageTypeId);
        }
      },
      messageAdd(){
        this.$message.info("十分抱歉，暂时不支持添加此功能");
      },
      handleDelete(id , obj){
        this.$confirm('确定要删除该用户吗?','提示',{
          confirmButtonText : '确定',
          cancelButtonText : '取消',
          type: 'warning'
        }).then(() => {
          this.$api.message.messageDelete(obj)
              .then(res => {
                console.log(res);
                this.$message.success('删除成功');
                this.getMessage();
              });
        }).catch(() => {
          this.$message.success('已取消');
        })
      },
      handleEdit(id , obj){
        this.dialogVisible=true;
        this.message = {...obj};
        this.isAdd = false;
      },
      formSubmit(){
        if (this.isAdd === null) return this.$message.error('错误操作');
        if (this.isAdd){
          this.$api.message.messageAdd(this.message)
              .then(() => {
                this.$message.success('添加成功!');
                this.dialogVisible = false;
                this.getMessage();
              })
        }else{
          this.$api.message.messagePatch(this.message.id , this.message)
              .then(() => {
                this.$message.success('修改成功!');
                this.dialogVisible = false;
                this.getMessage();
              })
        }
      }
    }
  }
</script>

<style scoped>

</style>
